<template>
	<div style="width: 100%;">
		<div class="" style="width: 100px;height: auto; margin: 20px 0;">
			<Button @click="addAdmin" style="text-align: left;">新增原始用户</Button>
		</div>
		<Table :border="false" style="width: 100%;" :columns="columns7" :data="data6"></Table>
		<Modal v-model="isShowChange" fullscreen title="修改用户" @on-ok="confirmModel" @on-cancel="closeModel">
			<div style="width: 1000px;height: auto;margin: 0 auto;">
				<div style="margin: 20px auto;width: 100%;" class="v-hv-center ">
					<Upload class="v-hv-center" :action="action" :on-success="success">
						<div style="width: 100px;height: 100px; border-radius: 3.125rem; overflow: hidden;"
						 class="image-box v-hv-center">
							<img :src="avatar" style="height: 100%;  object-fit: cover;" alt="">
							<div style="position: absolute;width: 100%;height: 100%;background-color: rgba(0,0,0,.5);">
								<p style="color: #fff;">点击上传</p>
							</div>
						</div>
					</Upload>
					<!-- <Avatar style="background-color: #87d068" size="large" :src="avatar" /> -->
					<h2 style="margin-top: 20px;">{{nickname}}
						<Icon @click="openChangeName" type="md-create" />
					</h2>
					<h3 style="margin-top: 20px;">{{address}}
						<Icon @click="openChangeAddress" type="md-create" />
					</h3>
					<h3 style="margin-top: 20px;">手机：{{phone}}
						<Icon @click="openChangePhone" type="md-create" />
					</h3>
					<div class="h-h-sa-v-center shdow" style="width: 60%;height: 120px;margin-top: 30px;">

						<div class="v-hv-center">
							<h2>关注</h2>
							<span style="font-size: 20px;color: #A33535;font-weight: 700;margin-top: 10px;">{{follow==null?0:follow}}</span>
						</div>
						<div class="v-hv-center">
							<h2>粉丝</h2>
							<span style="font-size: 20px;color: #A33535;font-weight: 700;margin-top: 10px;">{{follower==null?0:follower}}</span>
						</div>
						<div class="v-hv-center">
							<h2>文章</h2>
							<span style="font-size: 20px;color: #A33535;font-weight: 700;margin-top: 10px;">{{article_sum==null?0:article_sum}}</span>
						</div>
						<div class="v-hv-center">
							<h2>报告</h2>
							<span style="font-size: 20px;color: #A33535;font-weight: 700;margin-top: 10px;">{{report_sum==null?0:report_sum}}</span>
						</div>
					</div>
					<div style="margin-top: 50px; width: 95%;" class="h-h-start-v-center">
						<h1>文章</h1>
						<h1> / </h1>
						<h1>报告</h1>
					</div>
					<nodata v-if="articleList.length!=0?false:true"></nodata>
					<div style="width: 100%;height: calc(80vh);overflow-y: scroll;margin-top: 30px;" class="h-hv-start-fw">

						<div v-for="(item,index) in articleList" :key="index">
							<div class="report-box">
								<h3>《{{item.title}}》</h3>
								<br />
								<div class="content" v-html="item.content"></div>
							</div>
							<!--  <div style="margin: 0 30px;">
						    <Avatar style="margin-right: 20px;" icon="ios-person" />
						    <span>eason</span>
						  </div> -->
						</div>
					</div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		getAllAdmin,
		register,
		getUserInfo,
		getMyArticleList,
		updateAdminForAdmin,
		deleteAdmin
	} from '../../../../API/index.js'
	import $http from '../../../../request/request.js'
	import {
		SERVER_URL
	} from '../../../../static/config.js'
	export default {
		data() {
			return {
				id: "",
				nickname: '',
				address: '',
				avatar: "",
				report_sum: '',
				article_sum: "",
				phone:"",
				follow: "",
				follower: "",
				isShowChange: false,
				articleList: [],
				valueName: "",
				valueAddress: "",
				action: SERVER_URL + '/api/upload',
				columns7: [{
						title: "编号",
						key: "index",
						width: 70
					},
					{
						title: "账号",
						key: "id",
					},
					{
						title: "昵称",
						key: "name",
					},
					{
						title: "密码",
						key: "password",
					},
					{
						title: "手机",
						key: "phone",
					},
					{
						title: "地区",
						key: "address",
					},
					{
						title: "文章总数",
						key: "article_sum",
					},
					{
						title: "报告总数",
						key: "report_sum",
					},
					{
						title: "操作",
						width: 150,
						align: "center",
						render: (h, params) => {
							return h("div", [
								h(
									"Button", {
										props: {
											type: "primary",
											size: "small",
										},
										style: {
											marginRight: "5px",
										},
										on: {
											click: () => {
												this.show(params.index);
											},
										},
									},
									"修改"
								),
								h(
									"Button", {
										props: {
											type: "error",
											size: "small",
										},
										on: {
											click: () => {
												this.remove(params.index);
											},
										},
									},
									"删除"
								),
							]);
						},
					},
				],
				data6: [

				],
			}
		},
		created() {
			this.$Spin.show()
			this.getAllAdmin()
		},
		methods: {
			confirmModel(){
				this.$Spin.show()
				this.getAllAdmin()
			},
			closeModel(){
				this.$Spin.show()
				this.getAllAdmin()
			},
			show(e) {
				this.isShowChange = true;
				let data = {
					userid: this.data6[e].id
				}
				getUserInfo(data).then(async res => {
					console.log(res)
					this.id = res.data.data.userid,
					this.nickname = res.data.data.nickname
					this.address = res.data.data.address
					this.phone = res.data.data.phone
					this.avatar = res.data.data.avatar
					this.follow = res.data.data.follow
					this.follower = res.data.data.follower
					this.article_sum = res.data.data.article_sum
					this.report_sum = res.data.data.report_sum
					await this.getMyArticleList(res.data.data.userid)
				})
			},
			getMyArticleList(id) {
				return new Promise((resolve) => {
					let data = {
						user_id: id
					}
					getMyArticleList(data).then(res => {
						console.log(res)
						this.articleList = res.data.data
					})
				})
			},
			getAllAdmin() {
				getAllAdmin().then(res => {
					this.data6 = []
					console.log(res)
					res.data.data.forEach((item, index) => {
						this.data6.push({
							index: index + 1,
							id: item.userid,
							name: item.nickname,
							password: item.password,
							phone: item.phone,
							address: item.address,
							article_sum: item.article_sum == null ? 0 : item.article_sum,
							report_sum: item.report_sum == null ? 0 : item.report_sum
						})
					})
					this.$Spin.hide()
				})
			},
			addAdmin() {
				var userid = this.$randomString(50)
				var password = this.$randomString(10)
				console.log(userid)
				let data = {
					userid: userid,
					password: password,
					nickname: '测试用户' + userid.slice(0, 4),
					avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fspider.ws.126.net%2Fcb81cf184b40b06677e9d12313cb01eb.jpeg&refer=http%3A%2F%2Fspider.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618714521&t=0837f2aa6272b0ad708ba6a77ed0dcba",
					phone: "",
					address: ""
				}
				register(data).then(res => {
					console.log(res)
					this.getAllAdmin()
				})
			},
			openChangeName() {
				// this.nickname = this.valueName 
				this.$Modal.confirm({
					render: (h) => {
						return h('Input', {
							props: {
								value: this.nickname,
								autofocus: true,
								placeholder: 'Please enter your name...'
							},
							on: {
								input: (val) => {
									this.nickname = val;
								}
							}
						})
					},
					onOk: () => {
						this.updateAdmin()
					}
				})
			},
			updateAdmin() {
				return new Promise((resolve) => {

					let data = {
						nickname: this.nickname,
						address: this.address,
						userid: this.id,
						avatar: this.avatar,
						phone:this.phone
					}
					updateAdminForAdmin(data).then(res => {
						console.log(res)
						this.$Spin.hide();
					})
				})
			},
			openChangePhone() {
				// this.phone = this.valuePhone
				this.$Modal.confirm({
					render: (h) => {
						return h('Input', {
							props: {
								value: this.phone,
								autofocus: true,
								placeholder: 'Please enter your phone...'
							},
							on: {
								input: (val) => {
									this.phone = val;
									console.log(val)
								}
							},
			
						})
					},
					onOk: () => {
						this.updateAdmin()
					}
				})
			},
			openChangeAddress() {
				this.address = this.valueAddress
				this.$Modal.confirm({
					render: (h) => {
						return h('Input', {
							props: {
								value: this.address,
								autofocus: true,
								placeholder: 'Please enter your name...'
							},
							on: {
								input: (val) => {
									this.address = val;
									console.log(val)
								}
							},

						})
					},
					onOk: () => {
						this.updateAdmin()
					}
				})
			},
			success(res, file, flieList) {
				this.$Spin.show();
				this.avatar = res.imageUrl
				this.updateAdmin()
			},
			remove(index) {
				console.log(index)
				this.$Modal.confirm({
					title: '提示',
					content: `确定要删除昵称为${this.data6[index].name}的用户吗？`,
					onOk: () => {
						let data = {
							userid:this.data6[index].id
						}
						deleteAdmin(data).then(res=>{
							this.$Message.info('删除成功');
							this.getAllAdmin()
						})
						
					},
					onCancel: () => {
						this.$Message.info('已取消');
					}
				});
			}
		}
	}
</script>

<style scoped>
	.shdow {
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
	}

	.report-box {
		width: 180px;
		height: 250px;
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
		padding: 30px;
		margin: 30px 30px 20px 30px;
	}

	.ivu-table-overflowX::-webkit-scrollbar {
		display: none;
	}

	.content {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.image-box {
		position: relative;
	}

	.image-box p {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: none;
	}
	.image-box div{
		display: none;
	}
	.image-box:hover div {
		display: block;
	}
	.image-box:hover p {
		display: block;
	}
</style>
